import FilterForm from "./components/filterForm";
import PageTable from "./components/pageTable";
import { useState, useEffect } from "react";
import { PageContainer } from "@ant-design/pro-components";
import { Button, Modal, Form, Input, Radio, InputNumber } from "antd";
import { connect, useParams } from "umi";
const { TextArea } = Input;

const Dictionary = (props: any) => {
  const { dispatch } = props;
  // const access = useAccess();
  const params = useParams();
  const dictParams = params;
  useEffect(() => {
    dispatch({
      type: "SystemDictipnaryDetail/pageInit",
      params,
    });
  }, []);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [addDictInfo] = Form.useForm();
  //添加回显
  const showModal = () => {
    setIsModalOpen(true);
    addDictInfo.setFieldsValue({
      ...params,
    });
  };
  //添加
  const handleOk = () => {
    setIsModalOpen(false);
    addDictInfo
      .validateFields()
      .then((params: any) => {
        dispatch({
          type: "SystemDictipnaryDetail/addDictionaryInfo",
          params,
          callback: () => {
            dispatch({
              type: "SystemDictipnaryDetail/queryTableDataInfoList",
              params: dictParams,
            });
            addDictInfo.resetFields();
          },
        });
      })
      .catch((err: string) => {
        console.log(err);
      });
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const getDateList = () => {
    dispatch({
      type: "SystemDictipnaryDetail/queryTableDataInfoList",
      params,
    });
  };
  return (
    <PageContainer
      extra={[
        <Button key={1} onClick={showModal} type="primary">
          添加字典数据
        </Button>,
      ]}
    >
      <FilterForm />
      <PageTable getList={getDateList} />

      <Modal
        title="添加字典类型"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        forceRender
      >
        <Form labelCol={{ span: 4 }} form={addDictInfo}>
          <Form.Item name="dictType" label="字典类型">
            <Input placeholder={"请输入字典类型"} maxLength={20} disabled />
          </Form.Item>
          <Form.Item name="dictLabel" label="数据标签">
            <Input placeholder={"请输入数据标签"} maxLength={20} />
          </Form.Item>
          <Form.Item name="dictValue" label="数据键值">
            <Input placeholder={"请输入数据键值"} maxLength={20} />
          </Form.Item>
          {/* <Form.Item name="cssClass" label="样式属性">
            <Input placeholder={'请输入样式属性'} maxLength={20} />
          </Form.Item> */}
          <Form.Item name="dictSort" label="显示顺序">
            <InputNumber min={0} placeholder="请输入"></InputNumber>
          </Form.Item>
          {/* <ProFormSelect name="listClass" label="回显样式" showSearch /> */}
          <Form.Item name="status" label="状态">
            <Radio.Group>
              <Radio value="0">正常</Radio>
              <Radio value="1">停用</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="备注" name="remark">
            <TextArea
              rows={4}
              placeholder={"请输入内容"}
              maxLength={100}
              name="remark"
            />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
};

export default connect((SystemDictipnaryDetail: any) => ({
  ...SystemDictipnaryDetail,
}))(Dictionary);
